<template>
  <div class="app-container2 jk_wap">
    <!--部门数据-->
    <div class="left_box" @click="onChangeResizeChartFn">
      <commonTree2
        @clickNodeEmitFn="handleNodeClick"
        @resizeFn="onChangeResizeChartFn"
      />
    </div>
    <div class="right_box">
      <div class="right_head">
        <div class="head_title">{{ title }}</div>
        <div class="head_tab">
          <el-radio-group
            class="tabmenu"
            v-model="tabValue"
            @change="handelTabClick"
          >
            <el-radio-button
              v-for="(item, index) in tabList"
              :key="index"
              :label="item.name"
            ></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="right_chart">
        <indexLineChart :echartsData="echartsData" ref="chartsRef" />
      </div>
    </div>
    <!--用户数据-->
  </div>
</template>

<script>
import indexLineChart from "./chart/indexLineChart";
import commonTree2 from "../../../components/commonTree2";
export default {
  name: "cedianjiankong",
  components: { indexLineChart, commonTree2 },
  data() {
    return {
      //tab切换
      tabValue: "通道1",
      title: "板卡1",
      //tab数据
      tabList: [],
      echartsData: {
        arr: [],
        name: "",
        color: "88,179,186",
      },
    };
  },
  mounted() {
    this.clickRaioOrLine("板卡1");
  },
  methods: {
    handleNodeClick(cell) {
      this.title = cell.label;
      this.clickRaioOrLine(cell.label);
    },
    //tab点击节点
    handelTabClick(cell) {
      this.clickRaioOrLine(cell);
    },
    clickRaioOrLine(cell) {
      if (cell == "板卡1" || cell == "板卡1通道1") {
        this.tabList = [
          {
            name: "板卡1通道1",
          },
          {
            name: "板卡1通道2",
          },
        ];
        this.tabValue = this.tabList[0].name;
        this.echartsData = {
          arr: [
            {
              name: "10:00",
              value: 30,
            },
            {
              name: "10:30",
              value: 35,
            },
            {
              name: "11:00",
              value: 45,
            },
            {
              name: "11:30",
              value: 25,
            },
            {
              name: "12:00",
              value: 35,
            },
            {
              name: "12:30",
              value: 45,
            },
            {
              name: "13:00",
              value: 75,
            },
            {
              name: "13:30",
              value: 80,
            },
            {
              name: "14:00",
              value: 45,
            },
            {
              name: "14:30",
              value: 30,
            },
            {
              name: "15:00",
              value: 60,
            },
            {
              name: "15:30",
              value: 45,
            },
          ],
          name: this.tabValue,
          color: "88,179,186",
        };
      }
      if (cell == "板卡2" || cell == "板卡2通道1") {
        this.tabList = [
          {
            name: "板卡2通道1",
          },
          {
            name: "板卡2通道2",
          },
        ];
        this.tabValue = this.tabList[0].name;
        this.echartsData = {
          arr: [
            {
              name: "10:00",
              value: 50,
            },
            {
              name: "10:30",
              value: 60,
            },
            {
              name: "11:00",
              value: 90,
            },
            {
              name: "11:30",
              value: 71,
            },
            {
              name: "12:00",
              value: 50,
            },
            {
              name: "12:30",
              value: 45,
            },
            {
              name: "13:00",
              value: 30,
            },
            {
              name: "13:30",
              value: 40,
            },
            {
              name: "14:00",
              value: 45,
            },
            {
              name: "14:30",
              value: 40,
            },
            {
              name: "15:00",
              value: 75,
            },
            {
              name: "15:30",
              value: 85,
            },
          ],
          name: this.tabValue,
          color: "88,179,186",
        };
      }
      if (cell == "板卡1通道2") {
        this.echartsData = {
          arr: [
            {
              name: "10:00",
              value: 11,
            },
            {
              name: "10:30",
              value: 33,
            },
            {
              name: "11:00",
              value: 44,
            },
            {
              name: "11:30",
              value: 55,
            },
            {
              name: "12:00",
              value: 20,
            },
            {
              name: "12:30",
              value: 70,
            },
            {
              name: "13:00",
              value: 50,
            },
            {
              name: "13:30",
              value: 90,
            },
            {
              name: "14:00",
              value: 11,
            },
            {
              name: "14:30",
              value: 33,
            },
            {
              name: "15:00",
              value: 56,
            },
            {
              name: "15:30",
              value: 80,
            },
          ],
          name: this.tabValue,
          color: "88,179,186",
        };
      }
      if (cell == "板卡2通道2") {
        this.echartsData = {
          arr: [
            {
              name: "10:00",
              value: 99,
            },
            {
              name: "10:30",
              value: 50,
            },
            {
              name: "11:00",
              value: 80,
            },
            {
              name: "11:30",
              value: 48,
            },
            {
              name: "12:00",
              value: 44,
            },
            {
              name: "12:30",
              value: 77,
            },
            {
              name: "13:00",
              value: 99,
            },
            {
              name: "13:30",
              value: 45,
            },
            {
              name: "14:00",
              value: 53,
            },
            {
              name: "14:30",
              value: 30,
            },
            {
              name: "15:00",
              value: 30,
            },
            {
              name: "15:30",
              value: 76,
            },
          ],
          name: this.tabValue,
          color: "88,179,186",
        };
      }
    },
    onChangeResizeChartFn() {
      console.log(99);
      this.$refs.chartsRef.resizeChartFn();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/common_components_ui.scss";
.jk_wap {
  display: flex;
  .right_box {
    margin-left: 20px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    .right_head {
      flex: 0 0 auto;
      background: linear-gradient(to right, #163d71, #185a85, #163d71);
      height: 98px;
      .head_title {
        color: #fff;
        font-size: 20px;
        padding: 10px 20px;
        box-sizing: border-box;
      }
      .head_tab {
        position: relative;
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 6px;
          border-top: 1px solid #2171a6;
          border-bottom: 1px solid #2171a6;
          bottom: 0;
          left: 0;
          right: 0;
        }
        ::v-deep .tabmenu {
          .el-radio-button__inner {
            background: linear-gradient(
              to right,
              rgba(24, 77, 140),
              rgba(25, 97, 153, 1),
              rgba(24, 77, 140)
            );
            width: 180px;
            height: 50px;
            padding: 0;
            border: 0;
            text-align: center;
            line-height: 50px;
            color: #97a8be;
            margin-right: 10px;
            box-shadow: inherit;
          }
          .el-radio-button__orig-radio:checked + .el-radio-button__inner {
            background: linear-gradient(to right, #20579f, #258ac2, #20579f);
            z-index: 1;
            color: #fff;
          }
        }
      }
    }
    .right_chart {
      flex: 1 1 auto;
      height: 0;
      width: 100%;
      background: linear-gradient(rgb(1, 29, 61) 0%, rgb(1, 49, 117) 100%);
    }
  }
  .left_box {
    flex: 0 0 auto;
  }
}
</style>
